<template>
  <view class="payway">
    <view class="order">
      <text>订单金额</text>
      <text>￥{{ order?.totalPrice }}</text>
      <text v-if="salary">您当前拥有：{{ salary }}</text>
    </view>

    <text class="title">支付方式</text>

    <wd-status-tip image="content" v-if="props?.paywayList?.length == 0" tip="未找到支付方式" />
    <view class="payway-column" v-else>
      <view
        v-for="item in props.paywayList"
        :key="item.id"
        :class="`line ${props.modelValue == item.id ? 'active' : 'in-active'}`"
        @click="() => setPayway(item)"
      >
        <view class="radio-item">
          <wd-img :src="item.payIcon" width="50rpx" height="50rpx"></wd-img>
          <view class="name-money">
            <text class="name">{{ item.payName }}</text>
            <!-- <text class="name" v-if="props.modelValue == item.id">{{ item.remark }}</text> -->
          </view>
        </view>
        <!-- <wd-img :src="parseImg(item.id)" width="50rpx" height="50rpx" /> -->
      </view>
    </view>

    <wd-button @click="enterPay" block class="btn">确认支付</wd-button>
  </view>
</template>
<script setup>
import { http } from '@/utils/http'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: '',
  },
  paywayList: {
    type: Array,
    default: () => [],
  },
  order: {
    type: Object,
    default: null,
  },
})

const parseImg = (id) => {
  if (props.modelValue == id) {
    return 'http://verification.qzpfslc.cn/Home/jky/icon/%E5%BD%A2%E7%8A%B6%2023%403x.png'
  } else {
    return 'http://verification.qzpfslc.cn/Home/jky/icon/%E6%A4%AD%E5%9C%86%2011%20%E6%8B%B7%E8%B4%9D%403x.png'
  }
}

const emits = defineEmits(['update:modelValue', 'enterPay'])

const salary = ref('')

const setPayway = (item) => {
  salary.value = item.remark
  emits('update:modelValue', item.id)
}

const enterPay = async () => {
  let res = await http.post('/api/home/newPayOrder', {
    type: props.modelValue,
    orderNumber: props.order.orderId,
  })
  if (res.code == 200) {
    console.log('res', res)

    if (
      props.modelValue == '10' ||
      props.modelValue == '19' ||
      props.modelValue == '22' ||
      props.modelValue == '28'
    ) {
      // #ifdef APP
      let data = res.data.data

      console.log('data', data)

      uni.requestPayment({
        provider: 'alipay',
        orderInfo: data,
        success: (result) => {
          console.log('result', result)
        },
        fail: (error) => {
          console.log('error', error)
        },
      })
      // #endif
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
        mask: false,
      })

      uni.setStorageSync('order', props.order)
      emits('enterPay')
    }
  }
}
</script>
<style scoped lang="scss">
.payway {
  box-sizing: border-box;
  width: 750rpx;
  padding: 32rpx;

  .order {
    display: flex;
    flex-flow: column nowrap;

    gap: 24rpx;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200rpx;
  }

  .btn {
    position: fixed;
    bottom: calc(var(--window-bottom) + 100rpx);
    left: 75rpx;

    width: 600rpx;
    margin-top: 100rpx;
  }

  .title {
    font-size: 30rpx;
    font-weight: 600;
    line-height: 50rpx;
  }

  .payway-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
    width: 100%;
    margin-top: 24rpx;

    .line {
      box-sizing: border-box;

      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100rpx;
      padding: 12rpx;

      border-radius: 8rpx;

      .radio-item {
        display: flex;
        flex-flow: row nowrap;
        gap: 12rpx;
        align-items: center;
        justify-content: flex-start;
        min-width: 120rpx;
        min-height: 50rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }

        .name-money {
          display: flex;
          flex-flow: column nowrap;
          .name {
            font-size: 24rpx;
            line-height: 50rpx;
          }
        }
      }
    }

    .active {
      color: #ff4500;
      background-color: bisque;
      border: 1px solid #ff4500;
    }

    .in-active {
      color: #333;
      border: 1px solid #333;
    }
  }
}
</style>
